<template>
    <div class="order_areas">
        <div class="where">当前位置：订单审核><router-link to="/order_examine/order_areas">敏感地区</router-link></div>
        <div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
        <div class="team">
        	<div class="powertop">
        		<router-link class="powertopli" to="/order_examine/order_review">审核订单</router-link>
                <router-link class="powertopli powertopact" to="/order_examine/order_areas">敏感地区</router-link>
        	</div>
        </div>
		
        <div class="ordercenterli">
        	<div class="orderflex mingan">
        		<el-button @click="allno"  type="danger">批量拒绝</el-button>
        		<el-button @click="allgo"  type="danger">批量通过</el-button>
        	</div>
        	<div class="orderlist" v-loading="whereloading"  style="padding-top: 0;">
        		<div class="list">
        			<div class="th t1">
        				<input type="checkbox" @change="quanxuan" value="0" v-model="allchoose">
        			</div>
        			<div class="th t11">ID</div>
        			<div class="th t12">下单时间</div>
        			<div class="th t13">敏感地区</div>
        			<div class="th t15">收货地址</div>
        					
        			<div class="th t7">归属地</div>
        			<div class="th t8">收件人</div>
        			<div class="th t9">联系电话</div>
        			<div class="th t10" style="flex-basis: 160px;">操作</div>
        		</div>
        		
        		
        		<div class="list" v-for="item in wherelist" :key="item.id">
        			<div class="td t1">
        				<input type="checkbox" :value="item.id" @change="checkearea" v-model="checkedarea">
        			</div>
        			<div class="td t11">{{item.id}}</div>
        			<div class="td t12">{{item.created_at}}</div>
        			<div class="td t13" style="height: auto; line-height: 25px;">{{item.warn_area}}</div>
        			<div class="td t15" style="height: auto; line-height: 25px;">{{item.address_province}}{{item.address_city}}{{item.address_district}}{{item.address}}</div>
        	
        			<div class="td t7">{{item.region_c}}{{item.region_p}}</div>
        			<div class="td t8">{{item.address_name}}</div>
        			<div class="td t9">{{item.address_mobile}}</div>
        			<div class="td t10 reviewsee" style="flex-basis: 160px;">
        				<el-button type="mini" @click="oneno(item.id)">拒绝</el-button>
        				<el-button type="mini" @click="onego(item.id)">通过</el-button>
        			</div>
        		</div>
        		<div class="orderfanye">
              <el-pagination background :page-size="search.size" :current-page="search.page" @current-change="fanye" layout="total,prev, pager, next" :total="search.total"></el-pagination>
            </div>
        		
        	</div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
            data() {
                return {
                    product_name:"",
                    sku:"",
                    redbgy:false,
                    lanseid:"",
                    checkedarea:[],
                    allarea:[],
                    choosearea:[],
                    allchoose:false,
                    isIndeterminate:false,
                    checkAll:false,
                    tabnum:1,
                    reasonnum:0,
                    reasons:"",
                    loading:true,
                    dialogVisible:false,
                    piclog:false,
                    picurl:"",
                    reviewback:true,
                    reviewloading:false,
                    questionloading:true,
                    questiondialog:false,
                    questionsear:"",
                    questionname1:"",
                    questionname2:"",
                    questionname3:"",
                    whereloading:true,
                    wherelist:[],
                    orderlist:[],
                    qudaolist:[],
                    chanpinlist:[],
                    questionlist:[],
                    uploadpic:"",
                    total:0,
                    choose:{
                        face:"",
                        back:"",
                        hand:"",
                        cardid:"",
                        orderid:"",
                        good_name:"",
                        good_sku:""
                    },
                    search:{
                        channel_id:"",
                        product_name:"",
                        sp_id:"",
                        merchant_name:"",
                        product_sku:"",
                        source:"",
                        starttime:"",
                        endtime:"",
                        time:"",
                        status:"",
                        page:1,
                        size:100,
                        total:0,
                        flag:"",
                        share_name:""
                    },
                    copyBtn:"",
                    act:1,
                    shennum:""
                };
            },
            created() {
                //按回车键搜索
                var that = this
                document.onkeydown = function(e){
                   var ev = document.all ? window.event : e;
                   if(ev.keyCode==13) {
                       that.dosearch()
                   }
                } 
                // 获取敏感地区
                this.getwhere();
           	},
           		  methods: {
                  //翻页功能
                  fanye:function(page){
                    console.log(page)
                    this.search.page = page
                    this.getwhere()
                  },
                  // 获取敏感地区
                  getwhere:function(){
                      var that = this
                      axios.get('/api/plan-market/area/list?page_size='+this.search.size+'&page='+this.search.page)
                          .then(response => {
                              that.allarea = []
                              that.wherelist = response.data.data.data
                              that.search.total = response.data.data.total
                              that.whereloading = false
                              for( var i in this.wherelist){
                                  that.allarea.push(this.wherelist[i].id)
                              }
                          })
                  },
           				//批量通过
           				allgo:function(){
           					 
           					  if(this.checkedarea == ""){
           						  this.$message({
           						    message: '请先选择要审核的订单',
           						    type: 'error'
           						  });
           						  return false
           					  }
                      this.whereloading = true
                      var arr = ""
                      for( var i in this.checkedarea){
                          console.log(this.checkedarea[i])
                          arr = arr + this.checkedarea[i] + ","
                      }
                      arr = arr.substring(0, arr.lastIndexOf(','));
                                 
           					  var params = new URLSearchParams();
           					  params.append('isok', 1);
           					  params.append('order_ids', arr);
           					  axios.post('/api/plan-market/area/check', params)
           						  .then(response => {
                            if(response.data.msg.code == 0) {
                                this.$message({
                                  message: '已通过审核',
                                  type: 'success'
                                });
                                this.getwhere();
                                this.checkedarea = []
                                this.allchoose = false
                            }else {
                                this.$message.error(response.data.msg.info);
                            }
           							
           						  })
           				  },
           				  //批量拒绝
           				    allno:function(){
           						
                        if(this.checkedarea == ""){
                            this.$message({
                            message: '请先选择要审核的订单',
                            type: 'error'
                            });
                            return false
                        }
                        this.whereloading = true
                        var arr = ""
                        for( var i in this.checkedarea){
                            console.log(this.checkedarea[i])
                            arr = arr + this.checkedarea[i] + ","
                        }
                        arr = arr.substring(0, arr.lastIndexOf(','));
           
           				  	  var params = new URLSearchParams();
           				  	  params.append('isok', 0);
           				  	  params.append('order_ids', arr);
           				  	  axios.post('/api/plan-market/area/check', params)
           				  		  .then(response => {
                              if(response.data.msg.code == 0) {
                                    this.$message({
                                      message: '已拒绝审核',
                                      type: 'success'
                                    });
                                    this.getwhere();
                                    this.checkedarea = []
                                    this.allchoose = false
                              }else {
                                  this.$message.error(response.data.msg.info);
                              }
                               
           				  		  })
           				    },
           				//单条通过
           				  onego:function(id){
           					  this.whereloading = true
           					  var params = new URLSearchParams();
           					  params.append('isok', 1);
           					  params.append('order_ids', id);
           					  axios.post('/api/plan-market/area/check', params)
           						  .then(response => {
           								this.$message({
           								  message: '已通过审核',
           								  type: 'success'
           								});
           								this.getwhere();
           						  })
           				  },
           				  //单条拒绝
           				    oneno:function(id){
           						this.whereloading = true
           				  	  var params = new URLSearchParams();
           				  	  params.append('isok', 0);
           				  	  params.append('order_ids', id);
           				  	  axios.post('/api/plan-market/area/check', params)
           				  		  .then(response => {
           				  			this.$message({
           				  			  message: '已拒绝审核',
           				  			  type: 'success'
           				  			});
           				  			this.getwhere();
           				  		  })
           				    },	
           				//选中
           				checkearea:function(){
           					console.log(this.checkedarea)
           					// this.choosearea.push(this.checkedarea)
           					if(this.checkedarea.length == this.allarea.length){
           						this.allchoose = true
           					}else{
           						this.allchoose = false
           					}
           				},
           				//全选
           				quanxuan:function(){
           					
           					if(this.checkedarea.length != this.allarea.length){
           						this.checkedarea = this.allarea
           						this.allchoose = true
           					}else{
           						this.checkedarea = []
           						this.allchoose = false
           					}
           					console.log(this.checkedarea)
           				},
           				//翻页功能
           				fanye:function(page){
           					this.search.page = page
           					this.getwhere()
           				},
           				
           				//判断是否全选
           			    checkalls:function(val){
                               
           					console.log(val)
           			    },
           				//搜索
           				dosearch:function(){
                    this.search.page = 1
           					this.getwhere()
           				}
           				
           		  }
           };
</script>

<style lang="scss" scoped>
    .order_areas{
        .result{ margin-top: 20px;}
        
        .newsearch{ display: flex; text-align: center;  margin-bottom: 10px; font-size: 14px;
            .act{ color: #EEF7FF; border-bottom: 3px #EEF7FF solid !important; }
            .news1{ flex-basis: 170px; border-bottom: 3px #DCDCDC solid; padding: 10px 0; cursor: pointer;}
            .news2{ flex-basis: 170px; padding: 10px 0; border-bottom: 3px #DCDCDC solid; cursor: pointer;}
            .news3{ flex-basis: 170px; padding: 10px 0; border-bottom: 3px #DCDCDC solid; cursor: pointer;}
            .news4{ flex-basis: 656px; padding: 10px 0; border-bottom: 3px #DCDCDC solid; cursor: pointer;}
        }
        
        .ordertab{ display: flex; background: #F9F9F9;}
        .ordertabli{ flex-basis: 160px; line-height: 45px; text-align: center; font-size: 14px; color: #727272; cursor: pointer; border-top: 3px #F9F9F9 solid;}
        .ordertabact{ border-top: 3px #f00 solid; background: #FFFFFF;}
        .ordersearch{ background: #FFFFFF; padding: 15px 30px;}
        
        .orderflex{ display: flex;}
        .ordersub{ padding-left: 80px;}
        .list{ text-align: center; color: #727272; display: flex; width: 100%; border-bottom: 1px #EAEAEA solid;}
        .orderlist{ padding: 20px 0; background: #FFFFFF;}
        .t1{ flex-basis: 50px;}
        .t2{ flex-basis: 100px;}
        .t3{ flex-basis: 150px;}
        .t4{ flex-basis: 170px;}
        .t5{ flex-basis: 150px;}
        .t6{ flex-basis: 80px;}
        .t7{ flex-basis: 150px;}
        .t8{ flex-basis: 100px;}
        .t9{ flex-basis: 150px;}
        .t10{ flex-basis: 76px;}
        .t11{ flex-basis: 80px;}
        .t12{ flex-basis: 120px;}
        .t13{ flex-basis: 180px;}
        .t15{ flex-basis: 180px;}
        .list .th{ background: #E5E5E5; line-height: 45px;  font-size: 14px; }
        .list .td{ line-height: 45px; height: 45px;  font-size: 14px; overflow: hidden; cursor: pointer;}
        .reviewsee{ cursor: pointer; color: #1478F0;}
        .orderfanye{ text-align: right; margin: 20px 0;}
        .diaflex{ display: flex; justify-content: space-around;}
        .diaflex3{ display: flex; flex-wrap: wrap; justify-content: flex-start;}
        .reviewphone{ flex-basis: 377px; display: flex; justify-content: center; align-items: center; background: #EAEAEA; flex-wrap: wrap;}
        .reviewphone img{ max-width: 100%; max-height: 377px;}
        .prompt{ flex-basis: 377px; color: #E600FF; font-size: 14px; align-items: flex-end; display: flex;}
        .review{ width: 100%; display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap;}
        .questionsear{ width: 200px;}
        .quesresult{ width: 100%; text-align: center;}
        .red{ background: #FF0000; color: #FFFFFF; border: 1px #FF0000 solid;}
        .reason{ width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 20px 0;}
        .reason div{ background: #666; color: #FFFFFF; text-align: center; font-size: 14px; margin: 10px; padding: 3px 8px; margin-bottom: 5px; border-radius: 3px; cursor: pointer;}
        .reasonact{ background: #FF5A5A !important;}
        .reason input{ width: 200px;}
        .reasonf{ margin-top: 20px; background: #FFFFFF !important; width: 300px;}
        .review{}
        .redbg{ background: #FF5A5A !important;}
        .reviewback{ background: #848484; flex-basis: 123px; padding: 0 !important; text-align: center; line-height: 45px; height: 45px; font-size: 20px; border-radius: 5px; cursor: pointer;}
        .reviewgo{ background: #7CCF3E; flex-basis: 123px; padding: 0 !important; text-align: center; line-height: 45px; height: 45px; font-size: 20px; border-radius: 5px; cursor: pointer;}
        .jianqie{width: 100%; height: 500px;}
        .mingan{ padding: 20px 20px; background: #FFFFFF}
        .lanse{ text-shadow: #1478F0 0px 0px 2px;}
    }
</style>
